<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/chat.css" rel="stylesheet">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4610055_nouk92k0gu.css">
    <title>聊天</title>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <h1>聊天</h1>
    </div>
    <br><br>
    <ul class="chat">
        <li class="chat-list">
            <div class="chat-list-left">
                <div class="chat-list-left-info1">
                    <img src="img/sj01.png">
                </div>
                <div class="chat-list-left-info2">
                    <h3>南国食品旗舰店</h3>
                    <p>恭喜您在本店拼单成功，奖励您57元平台优...</p>
                </div>
            </div>
            <div class="chat-list-right">
                <p>24/05/29</p>
                <div class="icon-quantity">10</div>
            </div>
        </li>
        <li class="chat-list">
            <div class="chat-list-left">
                <div class="chat-list-left-info1">
                    <img src="img/sj02.png">
                </div>
                <div class="chat-list-left-info2">
                    <h3>陈大钰有幸遇见专卖店</h3>
                    <p>恭喜您在本店收货成功，送您一张省钱月卡...</p>
                </div>
            </div>
            <div class="chat-list-right">
                <p>24/05/16</p>
                <div class="icon-quantity">26</div>
            </div>
        </li>
        <li class="remind">
            <div class="iconfont icon-tixing"></div>
            <p>30天前的消息</p>
            <div class="iconfont icon-xiangshangjiantou"></div>
        </li>
        <li class="chat-list">
            <div class="chat-list-left">
                <div class="chat-list-left-info1">
                    <img src="img/sj03.png">
                </div>
                <div class="chat-list-left-info2">
                    <h3>涂一电器官方旗舰店</h3>
                    <p>恭喜您在本店收货成功，送您一张省钱月卡...</p>
                </div>
            </div>
            <div class="chat-list-right">
                <p>24/05/13</p>
                <div class="icon-quantity">20</div>
            </div>
        </li>
        <li class="chat-list">
            <div class="chat-list-left">
                <div class="chat-list-left-info1">
                    <img src="img/sj04.png">
                </div>
                <div class="chat-list-left-info2">
                    <h3>玛贝拉MAYLLIE官方旗舰店</h3>
                    <p>您购买的商品已到货，确认收货并发表评论...</p>
                </div>
            </div>
            <div class="chat-list-right">
                <p>24/04/15</p>
                <div class="icon-quantity">18</div>
            </div>
        </li>
        <li class="chat-list">
            <div class="chat-list-left">
                <div class="chat-list-left-info1">
                    <img src="img/sj05.png">
                </div>
                <div class="chat-list-left-info2">
                    <h3>维达旗舰店</h3>
                    <p>您购买的商品已到货，确认收货并发表评论...</p>
                </div>
            </div>
            <div class="chat-list-right">
                <p>24/04/12</p>
                <div class="icon-quantity">15</div>
            </div>
        </li>
        <li class="chat-list">
            <div class="chat-list-left">
                <div class="chat-list-left-info1">
                    <img src="img/sj06.png">
                </div>
                <div class="chat-list-left-info2">
                    <h3>白云山食品保健旗舰店</h3>
                    <p>孕妇，哺乳期妇女，14周岁以下儿童及婴幼...</p>
                </div>
            </div>
            <div class="chat-list-right">
                <p>24/04/12</p>
                <div class="icon-quantity">15</div>
            </div>
        </li>
        <li class="chat-list">
            <div class="chat-list-left">
                <div class="chat-list-left-info1">
                    <img src="img/sj06.png">
                </div>
                <div class="chat-list-left-info2">
                    <h3>好梦星</h3>
                    <p>恭喜你在本店拼单成功，送你1张刮刮卡，刮</p>
                </div>
            </div>
            <div class="chat-list-right">
                <p>24/04/11</p>
                <div class="icon-quantity">01</div>
            </div>
        </li>
    </ul>
    <br><br><br>
    <!--底部菜单部分-->
    <ul class="footer">
        <li onclick="location.href='index.html'">
            <i class="iconfont icon-shouyexuanzhong-copy"></i>
            <p>首页</p>
        </li>
        <li>
            <i class="iconfont icon-shipin"></i>
            <div class="icon-quantity">3</div> <!-- 添加数字 -->
            <p>多多视频</p>
        </li>
        <li>
            <img src="img/618.png">
            <p>618大促</p>
        </li>
        <li onclick="location.href='orderList.html'">
            <i class="iconfont icon-liaotianjilu" style="color: #444444"></i>
            <div class="icon-quantity">99+</div> <!-- 添加数字 -->
            <p>聊天</p>
        </li>
        <li onclick="location.href='my.html'">
            <i class="iconfont icon-gerenzhongxin-zhihui"></i>
            <p>个人中心</p>
        </li>
    </ul>
</div>
</body>
</html>